<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>门店地图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
    <link href="css/common.css" rel="stylesheet">
    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
    <style>
        .mapBox { width: 100vw; font-size: 14px; height: 100vh; }
        .mapBox > #mapInfo { padding: 20px; }
        .mapBox > div { width: 100%; height: 100%; }
        .mapBox > p { padding: 20px; }
        .mapInfo > p.center { text-align: center; }
        .mapInfo > p { line-height: 0.533333rem; }
        .dw{
            top:initial !important;
            background: #fff;
            bottom: 8px;
            padding: 2px;
            border-radius: 3px;
            box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 6px;
        }
        .dw img{
            vertical-align:middle;
        }
    </style>
</head>
<body>
<div class="mapBox">
    <div id="mapBox">
        <p id="mapInfo"></p>
    </div>
</div>

<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/common.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>

<script type="application/javascript">
    $(function () {
        var lat = Common.queryGetParam("lat");
        var lng = Common.queryGetParam("lng");
        //如果url中已经有坐标，直接渲染地图，否则获取当前坐标
        if(lat&&lng){
            showMap(lat,lng);
        }else{
            var paramStr = {};
            paramStr.url = window.location.href;
            var params = {};
            params.paramStr = JSON.stringify(paramStr);

            Common.ajaxWithParam("/fenful/api/v1/common/getWxConfig",params, function(returnData) {
                console.log(returnData);
                appId = returnData.appId;
                timestamp = returnData.timestamp;
                nonceStr = returnData.nonceStr;
                signature = returnData.signature;

                console.log(appId);

                wx.config({ //开始微信的配置 将获取的数据拿去请求
                    debug: false,
                    appId: appId,
                    timestamp: timestamp,
                    nonceStr: nonceStr,
                    signature: signature,
                    jsApiList: [ //可以调用下面的接口 我们这里只是调用scanQRCode 也就是扫码接口

                        'checkJsApi',
                        'openLocation',
                        'getLocation'

                    ]
                });

                wx.ready(function(res) {
                    console.log("successs!");
                    //基础接口判断当前客户端版本是否支持指定JS接口
                    wx.checkJsApi({
                        jsApiList: [
                            'getLocation'
                        ],
                        success: function (res) {
                            // alert(JSON.stringify(res.checkResult.getLocation));
                            if (res.checkResult.getLocation == false) {
                                layer.alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                                return;
                            }
                        }
                    });
                    getLocation();
                });

                wx.error(function(res) {

                });
            });

            /*
             * 注意：
             * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
             * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
             * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
             *
             * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
             * 邮箱地址：weixin-open@qq.com
             * 邮件主题：【微信JS-SDK反馈】具体问题
             * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
             */
        }
    });

    function getLocation() {
        wx.getLocation({
            type : 'gcj02', // 默认为'wgs84'的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success : function(res) {
                //使用微信内置地图查看位置接口
                /*wx.openLocation({
                    latitude : res.latitude, // 纬度，浮点数，范围为90 ~ -90
                    longitude : res.longitude, // 经度，浮点数，范围为180 ~ -180。
                    name : '我的位置', // 位置名
                    address : '京城大厦', // 地址详情说明
                    scale : 28 // 地图缩放级别,整形值,范围从1~28。默认为最大
                });*/
                showMap(res.latitude,res.longitude);
            },
            cancel : function(res) {

            }
        });

    }
    //显示腾讯地图
    function showMap(latitude, longitude){
        var center = new qq.maps.LatLng(latitude, longitude);
        var map = new qq.maps.Map(document.getElementById("mapBox"),{    //地图部分初始化
            zoom: 15,               //设置地图缩放级别
            center: center,     //设置中心点
            zoomControl: true,    //启用缩放控件
            mapTypeControlOptions: {  //设置控件的地图类型为普通街道地图
                mapTypeIds: qq.maps.MapTypeId.ROADMAP
            }
        });
        var marker = new qq.maps.Marker({
            position: center,
            map: map
        });    //创建标记

        var leftControl = document.createElement("div");
        leftControl.className = "dw";
        leftControl.innerHTML = "<img src='img/gua/location.png'/>";
        leftControl.index = 1; //设置在当前布局中的顺序
        map.controls[qq.maps.ControlPosition.TOP_CENTER].push(leftControl);
        //标记Marker点击事件
        qq.maps.event.addListener(leftControl, 'click', function() {
            wx.getLocation({
                type : 'gcj02', // 默认为'wgs84'的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success : function(res) {
                    //使用微信内置地图查看位置接口
                    var myLatLng =  new qq.maps.LatLng(res.latitude,res.longitude);
                    map.panTo(myLatLng);
                    marker.setPosition(myLatLng);
                }
            });
        });

        var result = {
            "code": 0,
            "msg": "success",
            "data": [{
                "id": 1,
                "name": "东方纯一大厦",
                "locate": "中国上海市上海市浦东新区峨山路505号",
                "latitude": "31.2151137369",
                "longitude": "121.5240669250"
            }, {
                "id": 2,
                "name": "浦东大酒店",
                "locate": "中国上海市上海市浦东新区浦东南路1888号",
                "latitude": "31.2152972487",
                "longitude": "121.5185308456"
            }, {
                "id": 3,
                "name": "由由大厦",
                "locate": "中国上海市上海市浦东新区浦东南路2111号",
                "latitude": "31.2097183322",
                "longitude": "121.5169429779"
            }, {
                "id": 4,
                "name": "北京银行大厦",
                "locate": "中国上海市上海市浦东新区浦东南路1540号",
                "latitude": "31.2211327367",
                "longitude": "121.5182733536"
            }, {
                "id": 5,
                "name": "陆家嘴世纪金融广场",
                "locate": "中国上海市上海市浦东新区杨高南路729号",
                "latitude": "31.2132418967",
                "longitude": "121.5351390839"
            }]
        };
        //result中数据 用于显示标记、和标记点击时的提示信息
        if(result.code==0 && result.msg=="success"){
            for(var i=0; i<result.data.length; i++){
                var data = result.data[i];
                var label = new qq.maps.Label({
                    position: new qq.maps.LatLng(data.latitude, data.longitude),
                    map: map,
                    content: data.name
                });
            }
        }else{
            layer.open({ content: "获取附近门店失败", skin: 'msg', time: 2 });
        }

    }

</script>
</body>
</html>